<template>
    <h1 class="dl">用户注册 </h1>
    <el-input 
        class="input" 
        placeholder="请输入账号" 
        v-model="user.account" 
        @change="handleIput" 
        :class="{'Invalid':isInvalid}" 
        :disabled="isRegister"/>
    <div 
        class="tips" 
        :class="{'shake':isShake}">{{tips}}</div>
    <el-input 
        class="input" 
        placeholder="请输密码" 
        type="password"  
        :disabled="isRegister" 
        v-model="user.password" 
        autocomplete="new-password"/>
    <div 
        class="tips" 
        :class="{'shake':isShake}">{{isCheckPassword}}</div>
    <el-input 
        class="input" 
        placeholder="请确认密码"
        type="password"  
        :disabled="isRegister"  
        v-model="checkPassword" 
        autocomplete="new-password"/>
    <el-button 
        type="primary" 
        class="input"
        @click="register"  
        :disabled="isRegister" 
        :loading="isRegister">注册</el-button> 
    <router-link 
        to="login" 
        class="a-hef">已有账号?点我登录</router-link>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import CheckAccountExists, { RegisterAccount } from '../../../api/Login';
import { ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router';
const router = useRouter();
const user = reactive({
    account:'',
    password:''
})
const tips=ref('')
const isCheckPassword=ref('')
const isInvalid = ref(false)
const isRegister = ref(false)
const isShake = ref(false)
const checkPassword = ref('')

const checkAccout = async():Promise<boolean>=>{
    try
    {
        const response =await CheckAccountExists.CheckAccountExists(user.account)
        if (!user.account.trim()){
            tips.value='账号不能为空'
            isInvalid.value=true
            return false
        }
        if (response.code===200){
            tips.value=''
            isInvalid.value=false
            return true
        }else if(response.code===500){
            tips.value='后台服务器出错了'
            isInvalid.value=true
            return false
        }else{
            tips.value='用户名已存在'
            isInvalid.value=true
            return false;
        }
    }catch(e){
        console.log(e)
        return false
    }    
}
const handleIput =async ()=>{
    await checkAccout()
}

const shakeTips=()=>{
    isRegister.value =false
    isShake.value = true
    setTimeout(
        ()=>{
            isShake.value = false
        },500)
}

const register = async()=>{
    isRegister.value =true
    if(user.password!=checkPassword.value){
        isCheckPassword.value='输入的密码和确认密码不一致'
    }else{
        isCheckPassword.value=''
    }
    const canRegister  = await checkAccout()
    if(!canRegister || user.password!=checkPassword.value){
        if (canRegister){
            tips.value='用户名已存在'    
        }
        shakeTips()
    }else{
        try{
            const response = await RegisterAccount(user)
            console.log(response.code)
            if(response.code===409){
                tips.value='用户名已存在'
                shakeTips()
                console.log('11')
            }else if(response.code=200){
                ElMessageBox.alert('注册成功', 'Title', {
                confirmButtonText: 'OK',
                callback: () => {
                router.push('/userLogin/login')},})
            }else{
                console.log('服务器出问题了')
            }
            isRegister.value =false
        }catch(e){
            console.log(e)
            isRegister.value =false
        }
    }
}
</script>

<style scoped>
.input{
    margin-top: 30px;
    width: 500px;
    height: 50px;
    font-size: 20px;
}
.dl{
    margin-top: 130px;
    width: 500px;
    height: 50px;    
    display: flex;
    justify-content: center;
    font-size: 300%;
}
.button{
    display: flex;
    margin-top: 30px;
    width: 500px;
    height: 50px;   
    justify-content: center; 
}
.a-hef{
    margin-top: 15px;
    font-size: 20px;
}
.tips{
    margin-top: 5px;
}
.Invalid{
    border: 1px solid #ff4d4f;
    color: red;
}
.shake{
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}
@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }
    
    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }
    
    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }
    
    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}
</style>